<template>
	<view>

		<!-- 头部轮播 -->
		<jswiper :Jinfo="info.banner"></jswiper>
		<!-- 滚动通知 -->
		<swiper v-if="danmuList.length>0" class="swiper_danmu" :current="current" :autoplay="true" :interval="3000"
			:duration="1000" vertical :disable-touch="true" @change="danmuChange">
			<swiper-item v-for="(item,index) in danmuList" :key="index">
				<view class="swiper-item">
					<image :src="item.avatar" mode=""></image>
					<text>{{item.nickname}}</text>
					<text>{{item.createtime}}下单</text>
				</view>
			</swiper-item>
			
		</swiper>

		<!-- 分类 -->
		<!-- <jshop-class :Jinfo="info.shopclass"></jshop-class> -->

		<!-- 品牌特卖 -->
		<jbrand class="h1_Jbrand" :Jinfo="info.brand" :Jpic="info.pic"></jbrand>

		<!-- 限时管家 -->
		<!-- <jmarke :Jinfo="info.marketing"></jmarke> -->

		<!-- 优惠专区 -->
		<!-- <jsale-banner :Jinfo="info.saleBanner"></jsale-banner> -->

		<!-- 商家列表 -->
		<jcur-skill ref="skill" class="h1_jcur_skill"></jcur-skill>

		<!-- 主题商品-->
		<!-- <jfactory class="h1_jfactory" :Jinfo="salefactory"></jfactory> -->

		<!-- 推荐，上新，抢购，厨卫 -->
		<!-- <jgoods class="h1_jgoods" id="aa" :Jinfo="recotabshop" :Jpic="info.pic"></jgoods> -->


		<!-- 活动弹层 -->
		<!-- <jwarn-msg :JsrcLink="activitycont" :JmsgShow.sync="activity"></jwarn-msg> -->


	</view>
</template>
<script>
	var i = 300
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import JshopClass from '@/components-home/pages/Jshopclass.vue'
	import Jbrand from '@/components-home/pages/Jbrand.vue'
	import Jmarke from '@/components-home/pages/Jmarke.vue'
	import JsaleBanner from '@/components-home/pages/JsaleBanner.vue'
	import JcurSkill from '@/components-home/pages/JcurSkill.vue'
	import Jfactory from '@/components-home/pages/Jfactory.vue'
	import Jgoods from '@/components-home/pages/Jgoods.vue'
	import JwarnMsg from '@/components-home/pages/JwarnMsg.vue'
	export default {
		components: {
			Jswiper,
			JshopClass,
			Jbrand,
			Jmarke,
			JsaleBanner,
			JcurSkill,
			Jfactory,
			Jgoods,
			JwarnMsg
		},
		data() {
			return {
				danmuList: [],
				current: 0,
				info: {
					banner: [],
				},
				shoplist:[],
			}
		},
		mounted() {
			this.getDanmu();
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('home/main', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getDanmu() {
				this.$axios('danmu/getdanmu', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.danmuList = this.danmuList.concat(res.data.data);
					}
				})
			},
			danmuChange(e) {
				if (e.detail.current >= this.danmuList.length - 5) {
					if (this.danmuList.length > 30) {
						this.danmuList.splice(0, 25);
						this.current = e.detail.current - 25;
					}
					this.getDanmu();
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.h1_Jbrand,
	.h1_jcur_skill,
	.h1_jfactory,
	.h1_jgoods {
		margin-top: 20upx;
	}

	.swiper_danmu {
		background: $bg-color;
		height: 70upx;
		.swiper-item {
			color: #fff;
			display: flex;
			align-items: center;
			line-height: 70upx;
			height: 70upx;
			padding: 20upx;

			image {
				border-radius: 50%;
				height: 40upx;
				width: 40upx;
			}

			text {
				margin: 0 10upx;
			}
		}
	}
</style>